<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <title>火影忍者联盟</title>
</head>
<body>
    <!--头部导航栏-->
    
    <!--侧边导航栏-->
    <div class="container">
        <div class="row">
            <header class="col-md-2"> 
                <div class="logo">
                    <img src="images/logo.png" alt="" class="hidden-xs">
                    <span class="visible-xs">火影忍者联盟</span>
                </div>
                <div class="nav">
                    <ul>
                        <li>
                            <a href="#" class="glyphicon glyphicon-edit">论坛</a>
                        </li>
                        <li>
                            <a href="#" class="glyphicon glyphicon-facetime-video">视频</a>
                        </li>
                        <li>
                            <a href="https://ac.qq.com/Comic/comicInfo/id/505432" class="glyphicon glyphicon-picture">漫画</a>
                        </li>
                        <li>
                            <a href="https://hyrz.qq.com/main.shtml" class="glyphicon glyphicon-phone">游戏</a>
                        </li>
                        <li>
                            <a href="list.html" class="glyphicon glyphicon-gift">周边</a>
                        </li>
                    </ul>
                </div>
            </header>
            <article class="col-md-7">
                <!--内容 content-->
                <div class="news clearfix">
                    <ul>
                        <li>
                            <a href="content-muye.html">
                                <img src="upload/muye.jpg" alt="">
                                <p>木叶忍者村</p>
                            </a>
                        </li>
                        <li>
                            <a href="content-wuyin.html">
                                <img src="upload/wuyin.jpg" alt="">
                                <p>雾隐忍者村</p>
                            </a>
                        </li>
                        <li>
                            <a href="content-yanyin.html">
                                <img src="upload/yanyin.jpg" alt="">
                                <p>岩隐忍者村</p>
                            </a>
                        </li>
                        <li>
                            <a href="content-yunyin.html">
                                <img src="upload/yunyin.jpg" alt="">
                                <p>云隐忍者村</p>
                            </a>
                        </li>
                        <li>
                            <a href="content-shayin.html">
                                <img src="upload/shayin.jpg" alt="">
                                <p>砂隐忍者村</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <!--发表部分-->
                <div class="publish">
                    <div class="row">
                        <div class="col-sm-9">
                            <a href="publish-zm.html"><h3>佐鸣对战</h3></a>
                            <p class="text-muted hidden-xs">csc发布2202121</p>
                            <p class="hidden-xs">佐助鸣人一共对战了几次？小编将带您一起回忆佐鸣的相爱相杀。</p>
                            <p class="text-muted">阅读111评论111点赞11</p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/zm.jpg" alt="">
                        </div>
                        <div class="col-sm-9">
                            <a href="publish-zg.html"><h3>自来也和纲手的故事</h3></a>
                            <p class="text-muted hidden-xs">csc发布2202121</p>
                            <p class="hidden-xs">火影中最大的遗憾之一，最终纲手没能等到那句告白。</p>
                            <p class="text-muted">阅读555评论55点赞5</p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/zg.jpg" alt="">
                        </div>
                        <div class="col-sm-9">
                            <a href="publish-xiao.html"><h3>晓</h3></a>
                            <p class="text-muted hidden-xs">csc发布2202121</p>
                            <p class="hidden-xs">无人不知无人不晓，最大反派最迷人！</p>
                            <p class="text-muted">阅读666评论66点赞66</p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/xiao1.jpg" alt="">
                        </div>
                        <!--分页-->
                    <nav aria-label="Page navigation">
                        <ul class="pagination pagination-lg">
                          <li>
                            <a href="#" aria-label="Previous">
                              <span aria-hidden="true">&laquo;</span>
                            </a>
                          </li>
                          <li><a href="#">1</a></li>
                          <li><a href="#">2</a></li>
                          <li><a href="#">3</a></li>
                          <li><a href="#">4</a></li>
                          <li><a href="#">5</a></li>
                          <li>
                            <a href="#" aria-label="Next">
                              <span aria-hidden="true">&raquo;</span>
                            </a>
                          </li>
                        </ul>
                      </nav>
                    </div>
                </div>
            </article>
            <aside class="col-md-3">
                <a href="#" class="banner">
                    <img src="upload/banner.png" alt="">
                </a>
                <a href="login.html" class="hot">
                    <span class="btn btn-primary">登录</span>
                    <h4 class="text-primary">火影忍者联盟</h4>
                    <p class="text-muted">Peace&love</p>
                </a>
            </aside>
        </div>
        <div class="ceshi">1</div>
    </div>
</body>
</html>